<!-- 
bootstrap
    布局容器
        - bootstrap框架需要为页面内容、栅栏系统准备一个布局容器
        - 预定义好的两个布局容器类，如下
            固定宽度    【.container】
            流式宽度    【.container-fluid】

    响应式布局容器（固定宽度）
        - .container
        - 底层利用媒体查询封装，默认划分为12份（列），即可进行等比例缩放
        - 容器左右两边利用padding、margin留出空白空间
        - 官网--》全局css样式--》栅栏系统--》媒体查询
            ------------------------------ 屏幕划分为四个档位
                大屏，>=1200px，固定1170px
                中屏，>=992px，固定970px
                小屏，>=768px，固定750px
                超小屏，<768px，固定100%
            ------------------------------
        - 适用于响应式布局：移动端、平板、PC端（大屏、小屏）

    流式布局容器（百分比宽度）
        - .container-fluid
        - 占据全部视口（viewport）的容器
        - 容器左右两边利用padding留出空白空间
        - 适用于单独制作移动端开发：移动端
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
        <title>布局容器</title>
        <style>
            div:nth-child(1) {
                background-color: cyan;
            }
            div:nth-child(2) {
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div class="container">响应式布局容器：固定宽度</div>
        <div class="container-fluid">流式布局容器：百分比宽度</div>
    </body>
</html>
